<template>
  <el-form ref="fltForm" label-width="130px" :model="FLT_INFO" size="mini">
    <el-row>
      <el-col :span="12">
        <el-form-item label="车队代码：" prop="fltCode" :rules="rules.fltCode" label-width="170px">
          <el-input :disabled="!isAdd" maxlength="15" style="width: 100%" v-model="FLT_INFO.fltCode"  @change="uppercase('fltCode')"></el-input>
        </el-form-item>
      </el-col>
     <el-col :span="12">
        <el-form-item label="车队名称：" prop="fltName" :rules="rules.fltName">
          <el-input :disabled="disabled" maxlength="96" style="width: 100%" v-model="FLT_INFO.fltName"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="车队状态：" prop="fltStatus" :rules="rules.fltStatus" label-width="170px">
          <el-select :disabled="disabled" clearable v-model="FLT_INFO.fltStatus" style="width: 100%">
            <el-option
              v-for="(item, index) in status"
              :key="index"
              :value="item.value"
              :label="item.label"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
     <el-col :span="12">
        <el-form-item label="坐标：">
          <el-input :disabled="disabled" maxlength="12" style="width: 30%" v-model="FLT_INFO.fltX"></el-input>
          <el-input :disabled="disabled" maxlength="12" style="width: 30%; margin-left: 10px;" v-model="FLT_INFO.fltY"></el-input>
          <el-button :disabled="disabled"  @click="showDialog = true" type="text">地图定位</el-button>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="统一社会信用代码：" prop="fltSocialcreditcode" :rules="rules.fltSocialcreditcode" label-width="170px">
          <el-input :disabled="disabled" maxlength="18" style="width: 100%" v-model="FLT_INFO.fltSocialcreditcode"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="企业注册地址：" prop="fltRegaddress" :rules="rules.fltRegaddress">
          <el-input :disabled="disabled" maxlength="200" style="width: 100%" v-model="FLT_INFO.fltRegaddress"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="许可证编号：" prop="fltPermitnumber" :rules="rules.fltPermitnumber" label-width="170px">
          <el-input :disabled="disabled" maxlength="32" style="width: 100%" v-model="FLT_INFO.fltPermitnumber"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="经营范围：" prop="fltBusinessscope" :rules="rules.fltBusinessscope">
          <el-input :disabled="disabled" maxlength="512" style="width: 100%" v-model="FLT_INFO.fltBusinessscope"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="车队联系人：" prop="fltLinkperson" :rules="rules.fltLinkperson" label-width="170px">
          <el-input :disabled="disabled" maxlength="20" style="width: 100%" v-model="FLT_INFO.fltLinkperson"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系电话：" prop="fltLinkphone" :rules="rules.fltLinkphone">
          <el-input :disabled="disabled" maxlength="20" style="width: 100%" v-model="FLT_INFO.fltLinkphone"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="授权用户数：" prop="fltLisenses" :rules="rules.fltLisenses" label-width="170px">
          <el-input :disabled="disabled" maxlength="9" style="width: 100%" v-model="FLT_INFO.fltLisenses"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="授权车辆：" prop="fltLisensestruck" :rules="rules.fltLisensestruck">
          <el-input :disabled="disabled" maxlength="9" style="width: 100%" v-model="FLT_INFO.fltLisensestruck"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="联系Email：" prop="fltEmail" :rules="rules.fltEmail" label-width="170px">
          <el-input :disabled="disabled" maxlength="25" style="width: 100%" v-model="FLT_INFO.fltEmail"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="车队网址：" prop="fltUrl" :rules="rules.fltUrl">
          <el-input :disabled="disabled" maxlength="192" style="width: 100%" v-model="FLT_INFO.fltUrl"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
    <el-col :span="12">
        <el-form-item label="所属省市：" prop="fltPrvChnname" :rules="rules.fltPrvChnname" label-width="170px">
          <el-select :disabled="disabled" v-model="FLT_INFO.fltPrvChnname" style="width: 100%" filterable clearable>
            <el-option v-for="(item, index) in provinces"
              :key="index"
              :label="item.PRV_CHNNAME"
              :value="item.PRV_CODE"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属港口：" prop="fltPorts" :rules="rules.fltPorts">
          <el-select :disabled="disabled" clearable v-model="FLT_INFO.fltPorts" style="width: 100%" filterable>
            <el-option
              v-for="(item, index) in ports"
              :key="index"
              :value="item.POT_CODE"
              :label="item.POT_CNAME"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="APP发送时间间隔：" prop="fltInterval" :rules="rules.fltInterval" label-width="170px">
          <el-input :disabled="disabled" maxlength="9" style="width: 100%" v-model="FLT_INFO.fltInterval" placeholder="单位：秒"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="车队类型：" prop="fltType" :rules="rules.fltType">
          <el-select :disabled="disabled" clearable v-model="FLT_INFO.fltType" style="width: 100%">
            <el-option
              v-for="(item, index) in types"
              :key="index"
              :value="item.value"
              :label="item.label"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="备注：" prop="remark" :rules="rules.remark">
          <el-input type="textarea" resize="none" :disabled="disabled" maxlength="200" style="width: 100%" rows="5" v-model="FLT_INFO.remark"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row class="el-dialog__footer">
      <el-col :span="24">
        <el-form-item>
          <el-button @click="close">关闭</el-button>
          <el-button v-if="!disabled" @click="save" type="primary">保存</el-button>
        </el-form-item>
      </el-col>
    </el-row>

    <el-dialog
      title="地图定位"
      append-to-body
      v-el-drag-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="showDialog"
      :visible.sync="showDialog">
      <baidu-map-pop @choose="choose"></baidu-map-pop>
      <el-row class="el-dialog__footer">
        <el-col :span="24">
          <el-form-item>
            <el-button @click="showDialog = false">取消</el-button>
            <el-button @click="saveAddress" type="primary">确定</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-dialog>

  </el-form>
</template>

<script>
import {
  // getPortsList,
  getTerminalyardProvinceList
} from '@/request/api'
import BaiduMapPop from '@/components/baidumap'

export default {
  name: 'dialog',
  components: {
    BaiduMapPop
  },
  props: {
    flt_info: {
      type: Object,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    dialogmode: {
      type: String
    }
  },
  data() {
    return {
      showDialog: false,
      tempLocation: null, // 当前选中的位置的地址

      FLT_INFO: this.flt_info,
      ports: [],
      provinces: [],
      // 车队状态
      status: [
        {
          value: '0',
          label: '可用'
        },
        {
          value: '1',
          label: '不可用'
        },
      ],
      // 车队类型
      types: [
        {
          value: '0',
          label: '短驳'
        },
        {
          value: '1',
          label: '长驳'
        },
        {
          value: '2',
          label: '长驳/短驳'
        },
      ],
    }
  },
  watch: {
    flt_info() {
      this.FLT_INFO = this.flt_info
    }
  },
  computed: {
    // 是否新增操作
    isAdd () {
      return this.dialogmode === this.DIALOG_MODE.ADD
    },
    rules() {
      return {
        fltCode: [
          { required: true, message: '请输入车队代码', trigger: 'blur' },
        ],
        fltName: [
          { required: true, message: '请输入车队名称', trigger: 'blur' }
        ],
        fltStatus: [
          { required: true, message: '请输入车队状态', trigger: 'blur' }
        ],
        fltInterval: [
          { required: true, message: '请输入APP发送时间间隔', trigger: 'blur' },
          {
            pattern: /^[0-9]+$/,
            message: '请输入正确的秒数',
            trigger: ['blur','change']
          },
        ],
        fltSocialcreditcode: [
          { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: '请输入正确的统一社会信用代码',
            trigger: 'blur'
          },
          { min: 1, max: 18, message: '输入至多18个字符', trigger: 'blur' }
        ],
        fltRegaddress: [
          { required: true, message: '请输入企业注册地址', trigger: 'blur' }
        ],
        fltPermitnumber: [
          { required: true, message: '请输入许可证编号', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: '请输入正确的许可证编号',
            trigger: 'blur'
          },
          { min: 1, max: 75, message: '输入至多75个字符', trigger: 'blur' }
        ],
        fltBusinessscope: [
          { required: true, message: '请输入经营范围', trigger: 'blur' }
        ],
        fltLinkperson: [
          { required: true, message: '请输入车队联系人', trigger: 'blur' }
        ],
        fltLinkphone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            pattern: /^[0-9]+$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          },
          { min: 1, max: 30, message: '输入至多30个字符', trigger: 'blur' }
        ],
        fltLisenses: [
          { required: true, message: '请输入授权用户数', trigger: 'blur' },
          {
            pattern: /^[0-9]+$/,
            message: '请输入正确的用户数',
            trigger: ['blur','change']
          },
        ],
        fltLisensestruck: [
          { required: true, message: '请输入授权车辆', trigger: 'blur' },
          {
            pattern: /^[0-9]+$/,
            message: '请输入正确的车辆数',
            trigger: ['blur','change']
          },
        ],
        fltPorts: [
          { required: true, message: '请选择所属港口', trigger: 'blur' }
        ],
        fltType: [
          { required: true, message: '请输入车队类型', trigger: 'blur' }
        ],
        fltEmail: [
          { required: true, message: '请输入联系Email', trigger: 'blur' },
          {
            pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
            message: '请输入正确的Email',
            trigger: 'blur'
          },
        ],
        fltUrl: [
          { required: true, message: '请输入车队网址', trigger: 'blur' },
          {
            pattern:  /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/,
            message: '请输入正确的网址',
            trigger: 'blur'
          },
        ],

      }
    }
  },
  methods: {
    // 点击确定保存地址
    saveAddress () {
      if (this.tempLocation) {
        this.FLT_INFO.fltX = this.tempLocation.point.lng
        this.FLT_INFO.fltY = this.tempLocation.point.lat
        this.FLT_INFO.tmnAddress = this.tempLocation.address
      }
      this.tempLocation = null
      this.showDialog = false
    },
    // 地图选点回调
    choose(location) {
      this.tempLocation = location
    },
    close() {
      // 关闭时清楚验证信息
      this.$emit('close')
    },
    save() {
      this.$refs['fltForm'].validate(valid => {
        if (valid) {
          this.$emit('save', this.FLT_INFO)
        }
      })
    },
    getPorts () {
      getPortsList().then(res=>{
        this.ports=res.data.FTKJWLHYPT
      })
    },
    getProvinces () {
      getTerminalyardProvinceList().then(res => {
        this.provinces = res.data.FTKJWLHYPT
      })
    },
  },
  mounted() {
    this.$refs.fltForm.clearValidate()
  },
  created() {
    this.getPorts() // 所属港口数据
    this.getProvinces() // 省市
  }
}
</script>

<style lang="scss" scoped></style>
